<template>
  <div class="warpper" ref="wrapper">
    <!--header   -->
    <div class="content">
      <div class="lg-war">
        <div class="logo">
          <img :src="imgtu[0]" alt="">
        </div>
        <div class="dingwei">
          <img :src="imgtu[1]" alt="">
        </div>
      </div>
      <!-- 第一屏 -->
      <div class="sw-warpper">
        <swiper :options="swiperOption">
          <swiper-slide v-for="item of swiper" :key="item.id">
            <img class="swiper-img" :src="item.img" />
          </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
      </div>
      <!-- 第二屏 -->
      <div class="sre_2">
        <img :src="imgtu[2]" alt="">
      </div>
      <!-- 第三屏 -->
      <div class="sre_3">
        <img :src="imgtu[3]" alt="">
        <div class="sre3-fx" v-for="(item,index) of hicon" :key='index'>
          <div v-for="(item,index) of item" :key='index'>
            <img :src="item" alt="">
          </div>
        </div>
        <a href="javascript:void(0)">抢先体验 领先对手</a>
      </div>
      <!-- 第四屏 -->
      <swipe></swipe>
      <!-- 第五屏 -->
      <swipe1></swipe1>
      <!-- 第五屏 -->
      <img1></img1>
    </div>
  </div>
</template>

<script>
import swipe from "./swiper/swipe";
import swipe1 from "./swiper/swipe1";
import img1 from "./swiper/img1";
import BScroll from "better-scroll";
export default {
  name: "home",
  components: {
    swipe,
    swipe1,
    img1
  },
  data() {
    return {
      swiperOption: {
        pagination: {
          el: ".swiper-pagination"
        },
        autoplay: {
          enabled: true,
          disableOnInteraction: false,
          delay: 2000
        },
        speed: 1000,
        loop: true
      },
      swiper: [
        {
          id: 1,
          img: "/static/images/banner1.jpg"
        },
        {
          id: 2,
          img: "/static/images/banner2.jpg"
        }
      ],
      hicon: [
        [
          "/static/images/sre3-2.png",
          "/static/images/sre3-3.png",
          "/static/images/sre3-4.png"
        ],
        [
          "/static/images/sre3-5.png",
          "/static/images/sre3-6.png",
          "/static/images/sre3-7.png"
        ]
      ],
      imgtu: [
        "/static/images/logo.png",
        "/static/images/dingwei.png",
        "/static/images/sre2-1.png",
        "/static/images/sre3-1.png"
      ]
    };
  },
  computed: {
    showSwiper() {
      return this.swiper.length;
    }
  },
  mounted() {
    // console.log(this.$refs.wrapper);
    const a = new BScroll(this.$refs.wrapper);
  }
};
</script>
<style scoped>
.swiper-pagination >>> .swiper-pagination-bullet-active {
  background: #fff;
}
.warpper .swiper-pagination {
  bottom: 1.8rem;
}
.warpper {
  width: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.lg-war {
  padding: 1rem;
  overflow: hidden;
}
.logo {
  width: 40%;
  float: left;
}
.content {
  padding-bottom: 4.5rem;
}
.dingwei {
  width: 8%;
  float: right;
  padding-top: 0.3rem;
}
.lg-war img {
  width: 100%;
}
.sw-warpper {
  overflow: hidden;
  width: 100%;
  height: 0;
  padding-bottom: 53.34%;
  background: #eee;
}
.swiper-img {
  width: 100%;
}
.sre_2 {
  width: 100;
  background: #f8f8f8;
  height: 6rem;
  position: relative;
  z-index: 1;
}
.sre_2 img {
  width: 100%;
  margin-top: -2rem;
}
.sre_3 {
  padding: 1rem;
  text-align: center;
}
.sre_3 img {
  width: 100%;
}
.sre_3 .sre3-fx {
  display: flex;
}
.sre_3 .sre3-fx div {
  padding: 1.5rem;
  padding-bottom: 0;
}
.sre_3 a {
  display: block;
  margin: 0 auto;
  margin-top: 2rem;
  width: 80%;
  height: 2.5rem;
  border: 1px solid #ff4848;
  border-radius: 20px;
  line-height: 2.5rem;
  text-align: center;
  color: #ff4848;
  font-size: 1rem;
}
</style>
